<template>
    <div class="cyclopedia">
        <!-- 头部页面 -->
        <div class="home_header">
             <mt-header>
                <span slot="left"><span style="color:#00deba;">健康</span>百科<span style="position:relative;top:-9px;color:#00deba;">+</span></span>
            </mt-header>  
       </div>
       <!-- 快速挂号和疾病百科 -->
       <div class="nav">
        <!-- 快速挂号 -->
       <div>
        <router-link to="/quickregistration" style="color:#000;">
            <h2>快速挂号<span></span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-shandian"></use></svg></h2>
            <p>轻松预约<span style="color:#e2808c">一分钟</span>挂号</p>
       </router-link>
       </div>
       <!-- 疾病百科 -->
       <div>
            <router-link to="/diseases" style="color:#000;">
                <h2>疾病百科<span></span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-bingdu"></use></svg></h2>
                <p>科普<span style="color:#ecb85b">疾病知识</span>不在小白</p>
            </router-link>
       </div>
       </div>
        <!-- 视频页面--名医科普 -->
        <div class="home_title">
            <div>名医科普</div>
            <div @click="goto('/video')">全部视频</div>
        </div>
        <!-- 视频页面--视频 -->
        <div class="home_video">
            <ul ref='ul'>
                <li v-for="{img,title,vdid} in videos" :key="vdid" @click.prevent="goto(`/call/${vdid}`)">
                    <div>
                        <img :src="img"/>
                    </div>
                    <span>{{title}}</span>
                </li>
            </ul>
        </div>
        <!-- 健康知识-全部知识 -->
        <div class="home_title">
            <div>健康知识</div>
            <div @click="goto('/health')">全部知识</div>
        </div>
        <!-- 组件文章public-list -->
        
        
         <public-list v-for="(v,i) in articles" :key="i" :items='v' @click.native="gotos(v.lid)"></public-list>

         
      
         <!--  v-if="!articles.length==0" 如果没有请求数据是页面占不了一平,infinite-scrool-distance会自动加载 -->
        <div infinite-scroll-distance="30" v-infinite-scroll="loadMore" v-if="!articles.length==0">
            <div class="information"  v-if="infor">{{loadText}}</div>
        </div>
    </div>
</template>

<script>

import PublicList from '@/components/PublicList.vue'
import '../../assets/js/iconfont'
    export default {
  components: { PublicList },

       data() {
        return {
            infor:false, loadText:'正在加载...',
            articles:[],
            videos:[],
        }
       },
       methods: {
            gotos(value){
                this.$router.push(`/articledetail?lid=${value}`)
                this.articles.forEach(v=>{
                    if(v.lid==value){
                    v.pageviews++
                    }
                })
            },
            goto(value) {
                this.$router.push(value)
            },
            getData(url,arr,callback){
                // 降速测试跳转页面是否请求
               if(arr.length==0){
                 // 调用方法执行加载
                this.$indicator.open({
                    text: '加载中...',
                    spinnerType: 'fading-circle'
                });
               }
                this.axios.get(url).then(res=>{
                    callback(res.data.data)
                    // 如果有数据清空加载
                    if(res){
                        this.$indicator.close();
                    }
                })
            },
            loadMore(){
            if(!this.MyLoadMore)return
            this.infor = true
            this.loadText = '没有更多数据'
            }
        },
        mounted(){
            this.$refs.ul.style.width=`${50*this.$refs.ul.children.length}vw`
            this.getData('/details?page=1',this.articles,(data)=>{this.articles=data})
            this.getData('/video?page=1',this.videos,(data)=>{this.videos = data
                if(data){
                    this.time = setTimeout(()=>{
                        this.$refs.ul.style.width=`${50*this.$refs.ul.children.length}vw`
                    },500)
                }
            })
        },
        activated(){
		    this.MyLoadMore = true
        },
        deactivated(){
            this.loadText = ''
            this.MyLoadMore = false
        }
    }
</script>

<style lang="scss" scoped>
.cyclopedia {
   
   &::after{
        content: '';
        display: block;
        height: 49px;
    }
    &::before{
        content: '';
        display: block;
        height: 46px;
    }
    padding: 1vh 3vw;
    background-color: #fff;
    .home_header{
        position: fixed;
        top: 0;
        left: 0;
        width: 94vw;
        padding: 1vh 3vw;
        z-index: 10;
        background-color: #fff;
        .mint-header {
            color: #000;
            background-color: transparent;
            font-size: 4vh;
            font-weight: 700;
            border-bottom: 1px solid #fafafa;
            margin-left: -1vw;
        }
    }
    .nav {
        border-radius: 5vw;
        display: flex;
        justify-content: space-evenly;
        div {
            padding: 20px 10px;
            margin-top: 20px;
            border: 1px solid #f9fafc;
            background-color: #f9fafc;
            h2 {
                margin-top: 0;
                span {
                    display: inline-block;
                    width: 0;
                    height: 0;
                    border: 8px solid transparent;
                    border-left: 8px solid #000;
                    margin-left: 10px;
                }
                .icon {
                    width: 1.25em;
                    height: 1.25em;
                    vertical-align: -0.15em;
                    fill: currentColor;
                    overflow: hidden;
                }
            }
        }
    }
    .home_title{
        display: flex;
        margin: 3vh 0;
        justify-content: space-between;
        div:nth-child(1){
            font-size: 1.3rem;
            font-weight: 600;
            letter-spacing: 0.1rem;
        }
        div:nth-child(2){
            color: #3bbdb6;
            &::after{
                content: '';
                width: 7px;
                height: 7px;
                display: inline-block;
                border-top: 2px solid #46D5CF;
                border-right: 2px solid #46D5CF;
                transform: rotate(45deg);
                margin-left: 1vw;
            }
        }
    }
     .home_video{
        $height:18vh;
        height: $height;
        overflow: auto;
        &::-webkit-scrollbar{
            display: none;
        }
        >ul{
            // width: 50vw * 3; js实现
            height: $height;
            >li{
                float: left;
                width: 48vw;
                margin-right: 2vw;
                height: $height;
                border-radius: 2vw;
                >div{
                    border-radius: 2vw;
                    position: relative;
                    &::before{
                        content: '';
                        width: 48vw;
                        height: 24vw;
                        border-radius: 2vw;
                        position: absolute;
                        top: 0;
                        display: block;
                        background-color: rgba($color: #000000, $alpha: 0.4);
                    }
                    &::after{
                        content: '';
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%,-50%);
                        width: 6vh;
                        height: 6vh;
                        display: block;
                        background-image: url(/public/image/home/stare.png);
                        background-size: 100%;
                        background-repeat: no-repeat;
                    }
                    >img{
                        width: 48vw;
                        height: 24vw;
                        border-radius: 2vw;
                        display: block;
                    }
                }
                >span{
                    white-space:nowrap;
                    overflow:hidden;
                    text-overflow:ellipsis;
                    display: block;
                    padding: 0 1vw;
                }
            }
        }
    }
    .information{
        text-align: center;
        margin: 1vw 0;
        color: rgb(75, 75, 75);
    }
}

</style>